<script setup lang="ts">
import PlayerCanvas from "@/views/Player/PlayerCanvas.vue"
import PlayerHeader from "@/views/Player/PlayerHeader.vue"
import PlayerBodyLeft from "@/views/Player/PlayerBodyLeft.vue"
import PlayerBodyRight from "@/views/Player/PlayerBodyRight.vue"
import PlayerFooter from "@/views/Player/PlayerFooter.vue"
import PlayerRange from "@/components/player/PlayerRange.vue";

defineOptions({name: 'PlayerView'})

</script>

<template>
  <div class="player-area">
    <PlayerHeader></PlayerHeader>
    <div class="player-body">
      <PlayerBodyLeft></PlayerBodyLeft>
     <PlayerBodyRight></PlayerBodyRight>
    </div>
    <div class="player-footer" >
      <PlayerCanvas></PlayerCanvas>
      <PlayerRange></PlayerRange>
      <PlayerFooter></PlayerFooter>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.player-area{
  height: 100vh;
  width: 100vw;
  background-color: #40241c;
  display: flex;
  flex-direction: column;

  .player-body{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1;
    position: relative;
    //-webkit-app-region: drag;
  }
}
</style>